<template>
  <div id="box">
    <div class="header">
      <Form ref="search" :model="search" inline  :label-width="80">
        <FormItem prop="game" label="游戏类型:" style="width: 250px">
          <Select v-model="search.game" style="width: 200px" placeholder="不限">
            <Option  v-for="(item,index) in gameList" :key="item.index" :value="item.value">{{item.label}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary"  @click="searching('search')" style="margin-right: 25px;">查询</Button>
          <Button type="success"  @click="showAdd('adding')" style="margin-right: 25px;">新增</Button>
          <Button type="default" @click="clear('search')">重置</Button>
        </FormItem>
      </Form>
    </div>
    <div class="center">
      <Table stripe :columns="lvColumns" :data="lvData" :loading="loading"></Table>
      <Modal v-model="add" wdith="800" title="新增勋章" :closable="false" :mask-closable="false">
        <Form ref="adding" :model="adding" :label-width="100" :rules="addRules">
          <FormItem prop="name" label="勋章名称:" style="width: 250px">
            <Input v-model="adding.name" placeholder="勋章名称" style="width: 200px"/>
          </FormItem>
          <FormItem prop="game" label="游戏类型:" style="width: 250px">
            <Select v-model="adding.game" style="width: 200px" @on-change="choose">
              <Option  v-for="(item,index) in gameList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <template v-if="look">
            <FormItem prop="level" label="签到次数:" style="width: 250px">
              <Input v-model="adding.level" placeholder="签到次数" style="width: 200px"/>
            </FormItem>
          </template>
          <template v-if="looking">
            <FormItem prop="leveling" label="累计消费:" style="width: 250px">
              <Input v-model="adding.leveling" placeholder="累计消费" style="width: 200px"/>
            </FormItem>
          </template>
          <FormItem prop="grade" label="勋章排序:" style="width: 250px">
            <Input v-model="adding.grade" placeholder="勋章排序" style="width: 200px"/>
          </FormItem>
          <FormItem prop="unreach" label="级别未达到图标:" style="width: 250px;">
            <template v-if="unshowing">
              <img :src="unpicUrl" style="width: 80px;height: 80px;">
            </template>
              <Upload
                :action="uploadURL"
                :show-upload-list="false"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :on-success="handleSuccess"
              >
                <Button icon="ios-cloud-upload-outline">上传图片</Button>
              </Upload>
            <Input v-model="adding.unreach" style="display: none"/>
          </FormItem>
          <FormItem prop="reach" label="级别达到图标:" style="width: 250px">
            <template v-if="showing">
              <img :src="picUrl" style="width: 80px;height: 80px;">
            </template>
            <Upload
              :action="uploadURL"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccess1"
            >
              <Button icon="ios-cloud-upload-outline">上传图片</Button>
            </Upload>
            <Input v-model="adding.reach" style="display: none"/>
          </FormItem>
        </Form>
        <div slot="footer">
            <Button type="default" @click="addCancel('adding')">取消</Button>
            <Button type="primary" @click="addConfrim('adding')" :loading="addload">确定</Button>
        </div>
      </Modal>
      <Modal v-model="modify" wdith="800" title="修改勋章" :closable="false" :mask-closable="false">
        <Form ref="modifying" :model="modifying" :label-width="100" :rules="modifyRules">
          <FormItem prop="name" label="勋章名称:" style="width: 250px">
            <Input v-model="modifying.name" placeholder="勋章名称" style="width: 200px"/>
          </FormItem>
          <FormItem prop="game" label="游戏类型:" style="width: 250px" >
            <Select v-model="modifying.game" style="width: 200px" @on-change="choosing">
              <Option  v-for="(item,index) in gameList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <template v-if="fook">
            <FormItem prop="level" label="签到次数:" style="width: 250px">
              <Input v-model="modifying.level" placeholder="签到次数" style="width: 200px"/>
            </FormItem>
          </template>
          <template v-if="fooking">
            <FormItem prop="leveling" label="累计消费:" style="width: 250px">
              <Input v-model="modifying.leveling" placeholder="累计消费" style="width: 200px"/>
            </FormItem>
          </template>
          <FormItem prop="grade" label="勋章排序:" style="width: 250px">
            <Input v-model="modifying.grade" placeholder="勋章排序" style="width: 200px"/>
          </FormItem>
          <FormItem prop="unreach" label="级别未达到图标:" style="width: 250px;">
            <template v-if="unshowing">
              <img :src="unpicUrl" style="width: 80px;height: 80px;">
            </template>
           <Upload
              :action="uploadURL"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccess"
            >
              <Button icon="ios-cloud-upload-outline">上传图片</Button>
            </Upload>
            <Input v-model="modifying.unreach" style="display: none"/>
          </FormItem>
          <FormItem prop="reach" label="级别达到图标:" style="width: 250px">
            <template v-if="showing">
              <img :src="picUrl" style="width: 80px;height: 80px;">
            </template>
            <Upload
              :action="uploadURL"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccess1"
            >
              <Button icon="ios-cloud-upload-outline">上传图片</Button>
            </Upload>
            <Input v-model="modifying.reach" style="display: none"/>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="changeCancel('modifying')">取消</Button>
          <Button type="primary" @click="changeConfrim('modifying')" :loading="addload">确定</Button>
        </div>
      </Modal>
      <Modal v-model="del" title=" 删除操作确认提示:" :closable="false" :mask-closable="false">
        <p style="color:red">
          本次进行删除操作，是否确认？</p>
        <div slot="footer">
          <Button type="default" size="large" @click="del=false">取消</Button>
          <Button type="primary" size="large" @click="delConfirm()" :loading="addload">确认</Button>
        </div>
      </Modal>
    </div>
    <div class="footer">
      <Page :total="total" :page-size="pageSize" :current="step" style="margin-top: 30px" show-total @on-change="getData"/>
    </div>
  </div>
</template>

<script>

  const G=window.g;
  let url=G.url;
  export default {
    name: "level",
    data() {
      return {
        uploadURL:url+'/file/upload/',
        search:{
          game:'',
        },
        gameList:[
          {
            label:'签到',
            value:0,
          },
          {
            label:'累计消费',
            value:1,
          }
        ],
        lvColumns:[
          {
            title: '数据ID',
            align:'center',
            key: 'id'
          },
          {
            title: '勋章名称',
            align:'center',
            key: 'name'
          },
          {
            title: '勋章排序',
            align:'center',
            key: 'grade'
          },
          {
            title: '升级数值',
            align:'center',
            key: 'criticalNum',
            render:(h, params) => {
              let txt="";
              if(params.row.gradeType==0){
                txt=params.row.criticalNum+"次"
              }else if(params.row.gradeType==1){
                txt=params.row.criticalNum+"元"
              }
              return h('div',txt);
            }
          },
          {
            title: '游戏类型',
            align:'center',
            key: 'gradeType',
            render:(h, params) => {
              let txt="";
             if(params.row.gradeType==0){
                 txt="签到"
             }else if(params.row.gradeType==1){
                txt="累计消费"
             }
             return h('div',txt);
            }
          },
          {
            title: '未达到图标',
            align:'center',
            key: 'hideImgUrl',
            render: (h, params) => {
              return h('div', {
                attrs: {
                  style: 'width: 80px;height:80px;'
                },
              }, [
                h('img', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  attrs: {
                    src: params.row.hideImgUrl, style: 'width: 80px;height: 80px;border-radius: 2px;margin-left:55px;'
                  },
                })
              ])
            }
          },
          {
            title: '已达到图标',
            align:'center',
            key: 'showImgUrl',
            render: (h, params) => {
              return h('div', {
                attrs: {
                  style: 'width: 80px;height:80px;'
                },
              }, [
                h('img', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  attrs: {
                    src: params.row.showImgUrl, style: 'width: 80px;height: 80px;border-radius: 2px;margin-left:55px;'
                  },
                })
              ])
            }
          },
          {
            title: '操作',
            align:'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.change(params.index)
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.delShow(params.index)
                    }
                  }
                }, '删除'),
              ])
            }
          },

        ],
        lvData:[
        ],
        total:0,
        pageSize:10,
        step:1,
        add:false,
        adding:{
          name:'',
          game:'',
          level:'',
          leveling:'',
          grade:'',
          unreach:'',
          reach:'',
        },
        addRules:{
          name: [
            { required: true, message: '勋章名称不能为空', trigger: 'blur' }
          ],
          game: [
            { required: true, message: '游戏类型不能为空', trigger: 'change',type:'number' }
          ],
          level: [
            { required: true, message: '签到次数不能为空', trigger: 'blur' },
            {type: 'string', pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '签到次数只能为整数', trigger: 'blur'}
          ],
          leveling: [
            { required: true, message: '累计消费不能为空', trigger: 'blur' },
            {type: 'string', pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '累计消费只能为整数', trigger: 'blur'}
          ],
          grade: [
            { required: true, message: '勋章排序不能为空', trigger: 'blur' },
            {type: 'string', pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '勋章排序只能为整数', trigger: 'blur'}
          ],
        },
        del:false,
        modify:false,
        modifying:{
          name:'',
          game:'',
          level:'',
          leveling:'',
          grade:'',
          unreach:'',
          reach:'',
        },
        modifyRules:{
          name: [
            { required: true, message: '勋章名称不能为空', trigger: 'blur' }
          ],
          game: [
            { required: true, message: '游戏类型不能为空', trigger: 'change',type:'number' }
          ],
          level: [
            { required: true, message: '签到次数不能为空', trigger: 'blur' },
            {type: 'string', pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '签到次数只能为整数', trigger: 'blur'}
          ],
          leveling: [
            { required: true, message: '累计消费不能为空', trigger: 'blur' },
            {type: 'string', pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '累计消费只能为整数', trigger: 'blur'}
          ],
          grade: [
            { required: true, message: '勋章排序不能为空', trigger: 'blur' },
            {type: 'string', pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '勋章排序只能为整数', trigger: 'blur'}
          ],
        },
        loading:true,
        imgHide:'',
        imgShow:'',
        addload:false,
        showing:false,
        unshowing:false,
        look:false,
        looking:false,
        fook:false,
        fooking:false,
        picUrl:'',
        unpicUrl:'',
      }
    },
    methods:{
      //查询
      searching(){
       this.getData();
      } ,
      //清空
      clear(name){
        this.$refs[name].resetFields();
        this.getData();
      },
      //修改model开
      change(index){
        this.modify=true;
        this.showing=true;
        this.unshowing=true;
        sessionStorage.setItem('id',this.lvData[index].id);
        this.modifying.name=this.lvData[index].name;
        this.modifying.game=this.lvData[index].gradeType;
        console.log(this.lvData[index].gradeType);
        if(this.lvData[index].gradeType===0){
          this.fook=true;
          this.fooking=false;
          this.modifying.level=this.lvData[index].criticalNum.toString();
        }else{
          this.fooking=true;
          this.fook=false;
          this.modifying.leveling=this.lvData[index].criticalNum.toString();
        }
        this.modifying.grade=this.lvData[index].grade.toString();
        this.modifying.unreach=this.lvData[index].hideImgUrl;
        this.modifying.reach=this.lvData[index].showImgUrl;
        this.picUrl=this.lvData[index].showImgUrl;
        this.unpicUrl= this.modifying.unreach=this.lvData[index].hideImgUrl;
      },
      //修改取消
      changeCancel(name){
        this.modify=false;
        this.$refs[name].resetFields();
        this.showing=false;
        this.unshowing=false;
      },
      //修改确认
      changeConfrim(name){
        let id=sessionStorage.getItem('id');
        if(this.modifying.game===0){
          this.look=true;
          this.looking=false;
          let data = {
            id:id,
            name: this.modifying.name,
            gradeType: this.modifying.game,
            grade: this.modifying.grade,
            criticalNum: this.modifying.level,
            hideImgUrl: this.modifying.unreach,
            showImgUrl: this.modifying.reach,
          }
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.addload = true;
              this.$http.post('/grade/update',data)
                .then(res => {
                  console.log(res);
                  if (res.data.status == 200){
                    this.$Message.success(res.data.message);
                    this.addload = false;
                    this.modify = false;
                    this.getData(this.step);
                    this.showing=false;
                    this.unshowing=false;
                    this.$refs[name].resetFields();
                  } else {
                    this.$Message.error(res.data.errors.msg);
                    this.addload = false;
                    this.modify = true;
                  }
                })
            }
          })
        }else{
          this.looking=true;
          this.look=false;
          let data = {
            id:id,
            name: this.modifying.name,
            gradeType: this.modifying.game,
            grade: this.modifying.grade,
            criticalNum: this.modifying.leveling,
            hideImgUrl: this.modifying.unreach,
            showImgUrl: this.modifying.reach,
          }
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.addload = true;
              this.$http.post('/grade/update',data)
                .then(res => {
                  console.log(res);
                  if (res.data.status == 200){
                    this.$Message.success(res.data.message);
                    this.addload = false;
                    this.modify = false;
                    this.getData(this.step);
                    this.showing=false;
                    this.unshowing=false;
                    this.$refs[name].resetFields();
                  } else {
                    this.$Message.error(res.data.errors.msg);
                    this.addload = false;
                    this.modify = true;
                  }
                })
            }
          })
        }
      },

      /**添加显示**/
      showAdd(name){
        this.look=false;
        this.looking=false;
        this.add=true;
        this.$refs[name].resetFields();
      },
      //添加取消
      addCancel(){
        this.add=false;
        this.showing=false;
        this.unshowing=false;
      },
      //添加确认
      addConfrim(name){
        if(this.adding.game===0){
          let data={
            name: this.adding.name,
            gradeType: this.adding.game,
            grade: this.adding.grade,
            criticalNum: this.adding.level,
            hideImgUrl: this.adding.unreach,
            showImgUrl: this.adding.reach,
          }
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.addload = true;
              this.$http.post('/grade/add',data)
                .then(res => {
                  if (res.data.status == 200) {
                    this.$Message.success(res.data.message);
                    this.addload = false;
                    this.add = false;
                    this.getData(this.step);
                    this.showing=false;
                    this.unshowing=false;
                    this.$refs[name].resetFields();
                  } else {
                    this.$Message.error(res.data.message);
                    this.addload = false;
                    this.add = true;
                  }
                })
            }
          })
        }else{
          let data = {
            name: this.adding.name,
            gradeType: this.adding.game,
            grade: this.adding.grade,
            criticalNum: this.adding.leveling,
            hideImgUrl: this.adding.unreach,
            showImgUrl: this.adding.reach,
          }
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.addload = true;
              this.$http.post('/grade/add',data)
                .then(res => {
                  if (res.data.status == 200) {
                    this.$Message.success(res.data.message);
                    this.addload = false;
                    this.add = false;
                    this.getData(this.step);
                    this.showing=false;
                    this.unshowing=false;
                    this.$refs[name].resetFields();
                  } else {
                    this.$Message.error(res.data.message);
                    this.addload = false;
                    this.add = true;
                  }
                })
            }
          })
        }

      },

      /**判断取值**/
      choose(value){
        console.log(value);
        if(value===0){
          this.look=true;
          this.looking=false;
        }else{
          this.looking=true;
          this.look=false;
        }
      },
      choosing(value){
        if(value===0){
          this.fook=true;
          this.fooking=false;
        }else{
          this.fooking=true;
          this.fook=false;
        }
      },

      /**删除显示**/
      delShow(index){
        this.del=true;
        sessionStorage.setItem('id',this.lvData[index].id);
      },

      /**删除确认**/
      delConfirm(){
      let id= parseInt(sessionStorage.getItem('id'));
      let data={
        id:id,
      };
      this.addload=true;
        this.$http.delete('/grade/'+id,)
          .then(res => {
            console.log(res);
            if (res.data.status == 200) {
              this.$Message.success(res.data.message);
              this.addload = false;
              this.del=false;
              this.getData(this.step);
            } else {
              this.$Message.error(res.data.message);
              this.addload = false;
              this.del=true;
            }
          })
        .catch(()=>{
          this.$Message.error("网络错误，请稍后再试！");
          this.addload = false;
        })
      },

      //获取数据
      getData(step){
        this.step=step;
        this.$http.get('/grade/list', {
          params: {
            gameType:this.search.game,
            page: this.step,
            size: this.pageSize,
          }
        })
          .then(res => {
            console.log(res);
            if (res.data.status === 200) {
              this.lvData = res.data.data.list;
              this.total = res.data.data.total;
              this.loading = false;
            } else {
              this.$Message.error(res.data.message);
              this.loading = false;
            }
          })
      },

      //上传图片回调
      handleSuccess(res, file) {
        console.log(file);
        if (file.response.status == 200){
          this.adding.unreach = file.response.data;
          this.modifying.unreach=file.response.data;
          this.unpicUrl=file.response.data;
          this.unshowing=true;
          this.$Message.success('上传成功！')
        } else {
          this.$Message.error('上传失败，请重新上传！')
        }

      },
      handleSuccess1(res, file) {
        console.log(file);
        if (file.response.status == 200){
          this.adding.reach = file.response.data;
          this.modifying.reach=file.response.data;
          this.picUrl=file.response.data;
          this.showing=true;
          this.$Message.success('上传成功！')
        } else {
          this.$Message.error('上传失败，请重新上传！')
        }

      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确, 请选择JPG或者PNG的图片！'
        });
      },
      handleMaxSize(file) {
        this.$Notice.warning({
          title: '超过文件大小限制',
          desc: '文件  ' + file.name + ' 不能超过2M！'
        });
      },
    },
    mounted(){
      this.getData();
    }
  }
</script>

<style scoped>
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
    width: 100%;
    height: 100%;
  }
</style>
